<template>
  <view class="submit-app">
    <view class="box-top">
      <view class="h3">提交申请享受互助保障</view>
      <view class="declare">
        <view class="des-title">
          <view class="title">您制定的管理周期为</view>
          <image class="edit-icon" src="../../static/icon/edit.png" @click="editTime" />
        </view>
        <view class="time">{{ estimatedPickupPeriodTxt }}（{{ estimatedPickupDay }}号）</view>
        <view class="des-info">
          默认按每个周期开始第一个{{ estimatedPickupDay }}日为您配送，如需临时调整，请点此联系
          <text class="color">\t 在线客服 \t</text>
        </view>
      </view>
    </view>

    <view class="goods">
      <view class="des-title">
        <view class="title">您制定的管理药品为</view>
        <image class="edit-icon" src="../../static/icon/edit.png" @click="editGood" />
      </view>
      <view v-for="item in drugs" :key="item.baseDrugId" class="drug-list">
        <image class="drug-img" :src="item.outerPackagePicUrl" />

        <view class="drug-info">
          <view class="title">{{ item.commonName }}</view>
          <view class="spe">
            {{ item.preparationUnit }}*{{ item.packageSize }}{{ item.minimumUnit }}/{{ item.packageUnit }}
          </view>
          <view class="usage">
            <text>周期用量</text>
            <view class="step">
              <view class="btn">-</view>
              <text>{{ cycleUse(item) }}</text>
              <view class="btn">+</view>
            </view>
          </view>
        </view>
      </view>
      <view class="total">
        费用合计: <text class="num">￥{{ totalCost }}</text>
      </view>
    </view>

    <view class="tip"> 专业化运作和管理慈善项目，中国市长协会与陶斯亮女士共同发起成立北京爱尔 </view>

    <view class="address">
      <view class="des-title">
        <view class="title">您制定的药品配送地点为</view>
        <image class="edit-icon" src="../../static/icon/edit.png" @click="editAdd" />
      </view>
      <view class="name">{{ name }}</view>
      <view class="tel">{{ phone }}</view>
      <view class="add">
        {{ shippingAddress.value[0] }} {{ shippingAddress.value[1] }} {{ shippingAddress.value[2] }} {{ street }}
      </view>
    </view>

    <view class="submit" @click="submit">提交申请</view>
  </view>
</template>

<script>
/**
 * 废弃
 */
import { mapState, mapGetters } from 'vuex';
import { regularMedicationInfoEdit } from '@/api/drugInfo';
const groups = [
  { text: '每月一次', value: 1 },
  { text: '每两月一次', value: 2 },
  { text: '每三月一次', value: 3 }
];

export default {
  data() {
    return {
      estimatedPickupPeriodTxt: ''
    };
  },

  computed: {
    // 周期用药量计算
    cycleUse() {
      const self = this;
      return function (item) {
        // (每日几次 * 每次几片 * 每几月一次 * 30) / 每瓶几片
        const cycle = (item.frequency * item.useAmount * self.estimatedPickupPeriod * 30) / item.packageSize;
        return Math.ceil(cycle);
      };
    },
    ...mapState('assess', {
      drugs: 'drugs',
      estimatedPickupPeriod: 'estimatedPickupPeriod', // 预约取药周期
      estimatedPickupDay: 'estimatedPickupDay',
      shippingAddress: 'shippingAddress',
      street: 'street',
      name: 'name',
      phone: 'phone'
    }),
    ...mapGetters(['totalCost'])
  },

  onLoad: function () {
    this.estimatedPickupPeriodTxt = groups[this.estimatedPickupPeriod - 1].text;
  },

  methods: {
    // 编辑周期
    editTime() {
      this.$wxPromise.navigateTo({
        url: '/pages/receiptInfo/index'
      });
    },

    // 编辑药品
    editGood() {
      this.$wxPromise.navigateTo({
        url: '/pages/diseaseAssess/index'
      });
    },

    // 编辑地址
    editAdd() {
      this.$wxPromise.navigateTo({
        url: '/pages/receiptInfo/index'
      });
    },

    // 提交
    async submit() {
      const id = this.$store.state.join.storeFormData.patientId;
      const data = {
        estimatedPickupPeriod: this.estimatedPickupPeriod,
        estimatedPickupDay: this.estimatedPickupDay,
        shippingAddress: JSON.stringify({
          name: this.name,
          machineNumber: this.phone,
          shippingAddressType: 3,
          provincesId: this.shippingAddress.code[0],
          cityId: this.shippingAddress.code[1],
          areaId: this.shippingAddress.code[2],
          street: this.street
        }),
        drugs: {}
      };
      const drug = this.drugs.map((item) => {
        return {
          baseDrugId: item.baseDrugId,
          amount: (item.frequency * item.useAmount * this.estimatedPickupPeriod * 30) / item.packageSize,
          useAmount: item.useAmount,
          frequency: item.frequency
        };
      });
      data.drugs = JSON.stringify(drug);
      console.log(data);
      await regularMedicationInfoEdit(id, data);
      this.$wxPromise.navigateTo({
        url: '/pages/helpResult/index'
      });
    }
  }
};
</script>

<style lang="scss">
.submit-app {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .box-top {
    background: linear-gradient(186deg, hsl(0, 95%, 71%) 0%, #f63434 100%);
    height: 546rpx;
    border-top: 1px solid #fb6f6f;
  }
  .h3 {
    font-size: 48rpx;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    margin: 26rpx 0;
  }
  .des-title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 20rpx;
  }
  .title {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
  }
  .edit-icon {
    width: 48rpx;
    height: 48rpx;
  }
  .declare {
    border-radius: 24rpx;
    background: #ffffff;
    padding: 26rpx 32rpx;
    margin: 24rpx;
    .time {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      font-weight: bold;
      margin: 20rpx 0;
    }
    .des-info {
      color: #9b9b9b;
      font-size: 24rpx;
      margin-bottom: 8rpx;
    }
    .color {
      color: #346ef1;
    }
  }
  .goods {
    border-radius: 24rpx;
    background: #ffffff;
    padding: 26rpx 32rpx 0;
    margin: 24rpx;
    margin-top: -96rpx;
    .title {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
    }
    .edit-icon {
      width: 48rpx;
      height: 48rpx;
    }
    .des-title {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f4f4f4;
      padding-bottom: 20rpx;
    }
    .total {
      text-align: right;
      font-size: 28rpx;
      color: #000000;
      padding: 20rpx 0;
      .num {
        color: #f1453f;
      }
    }
  }
  .drug-list {
    display: flex;
    margin: 40rpx 0 0;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 40rpx;
    .drug-img {
      width: 120rpx;
      height: 120rpx;
      // border: 1px dashed #e8e8e8;
    }
    .drug-info {
      flex: 1;
      margin-left: 28rpx;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.55);
      position: relative;
    }
    .title {
      font-size: 32rpx;
      padding-right: 40rpx;
      line-height: 1.3em;
      color: rgba(0, 0, 0, 0.9);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .spe {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-top: 10rpx;
      overflow: hidden;
    }
    .usage {
      margin-top: 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24rpx;
      color: rgba(0, 0, 0, 0.6);
    }
    .step {
      width: 320rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn {
        width: 88rpx;
        height: 56rpx;
        background: #f3f3f3;
        border-radius: 8rpx;
        text-align: center;
        line-height: 46rpx;
        font-size: 40rpx;
      }
    }
  }
  .tip {
    color: #9b9b9b;
    font-size: 24rpx;
    margin: 28rpx 56rpx;
  }
  .address {
    border-radius: 24rpx;
    background: #ffffff;
    padding: 26rpx 32rpx 40rpx;
    margin: 24rpx;
    margin-bottom: 60rpx;
    .name,
    .tel,
    .add {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.55);
      margin-top: 20rpx;
    }
  }
  .submit {
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    border-radius: 44rpx;
    margin: auto 24rpx 60rpx;
    height: 88rpx;
    font-size: 36rpx;
    color: #ffffff;
    text-align: center;
    line-height: 88rpx;
  }
}
</style>
